<template>
  <div class="articles-container">
    <el-card class="articles">
      <el-row type="flex" justify="space-between">
      <!-- 搜索 -->
      <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="关键字">
            <el-input v-model="form.keyword" placeholder="关键字" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.state" placeholder="请选择"  style="width:200px">
              <el-option v-for="(item,index) in state" :key="index" :label="item.value" :value="item.id" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
              <el-button @click="reset">清除</el-button>
              <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
      </el-form>
      <el-row >
        <el-button type="success" :icon="EditPen" @click="addSkillBtn">新增技巧</el-button>
      </el-row>
    </el-row>
      <!-- 警告 -->
      <el-alert
        :title="`数据共计${page.total}条`"
        type="info"
        show-icon
        :closable="false">
      </el-alert>

      <!-- 表格 -->
      <el-table
      :data="list"
      style="width: 100%"
      class="table">
      <el-table-column
        prop=""
        label="序号"
        type="index"
        width="80px">
      </el-table-column>
      <el-table-column
        prop="title"
        fit="true"
        label="文章标题"
        width="350px">
      </el-table-column>
      <el-table-column
        prop="visits"
        label="阅读数">
      </el-table-column>
      <el-table-column  prop="username" label="录入人"></el-table-column>
      <el-table-column  prop="createTime" label="录入时间">
        <template v-slot="{row}">
       {{filtrationTime(row.createTime)}}
        </template>

      </el-table-column>
      <el-table-column  prop="state" label="状态" width="100px">
        <template v-slot="{row}">
          {{formState(row.state)}}
          <!-- {{row.state=== 1? '已启用':'已禁用'}} -->
        </template>
      </el-table-column>

      <el-table-column  prop="handle" label="操作" width="200px">
        <template v-slot="{row}">
          <el-link :underline="false" type="primary" @click="viewDialogBtn(row)">预览</el-link>
          <el-link :underline="false" type="primary" @click="forbiddenBtn(row)">{{State(row.state)}}</el-link>
          <el-link :underline="false" type="primary" @click="edit(row)" :disabled="row.state===1? false:true">修改</el-link>
          <!-- :disabled="disabledBtn(row.state)" -->
          <el-link :underline="false" type="primary" @click="del(row)" :disabled="row.state===1? false:true">删除</el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-row type="flex" justify="end" class="paging">
        <el-pagination
          @size-change="CurrentChange"
          @current-change="CurrentChange"
          :page-sizes="[2, 6, 8, 10]"
          layout=" prev, pager, next,sizes, jumper"
          v-model:current-page="page.page"
          v-model:page-size="page.pagesize"
          :total="page.total">
        </el-pagination>
    </el-row>

    </el-card>

    <!-- 弹框 -->
    <el-dialog :title="title" v-model="showDialog" align-center class="dialog" >
        <add-skill v-if="showDialog" @success="getArticlesList()" @close="showDialog= false" ref="dialogRef"></add-skill>
    </el-dialog>

    <!-- 预览弹框 -->
    <el-dialog title="预览文章" v-model="viewDialog" align-center class="viewDialog" >
      <el-form  :model="detailForm">
        <div class="viewTitle">
          {{detailForm.title}}
        </div>
      <div class="viewTime">
        <span>{{filtrationTime(detailForm.createTime)}}</span>
        <span>{{detailForm.creator}}</span>
        <span><el-icon color="red"><View /></el-icon>{{detailForm.reads}}</span>
      </div>
      <div class="content" style="backgroundColor:#f5f5f5" v-html="detailForm.articleBody"></div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, detail, changeState, simple, update } from '@/api/hmmm/articles.js'
import { filtrationTime, formState, State } from '@/filters/index.js'// disableBtn
import articlesEnum from '@/api/base/baseApi.js'
import addSkill from './components/add-skill.vue'
import { ref } from 'vue'
import { EditPen } from '@element-plus/icons-vue'
export default {
  data () {
    return {
      form: {
        keyword: undefined,
        state: undefined
      },
      state: articlesEnum.status, // 状态
      list: [],
      page: {
        page: 1,
        pagesize: 10,
        total: 0
      }
      // detailForm: {
      //   title: '',
      //   articleBody: '',
      //   videoURL: '',
      //   reads: 0
      // },
    }
  },
  components: { addSkill },
  created () {
    this.getArticlesList()
  },
  methods: {
    // 删除
    del (id) {
      this.$confirm('确认删除', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
        await remove(id)
        this.$message.success('删除成功')
        this.getArticlesList()
      })
    },

    // 清空
    reset () {
      this.form = {
        title: undefined,
        state: ''
      }
      this.onSubmit()
    },

    // 禁用
    async forbiddenBtn (row) {
      if (row.state === 0) {
        const res = await changeState(row)
        console.log(res)
        row.state = 1
      } else {
        await changeState(row)
        row.state = 0
      }
    },
    // 获取文章列表
    async getArticlesList () {
      const { data: { page, pagesize, items, counts } } = await list({ ...this.page, ...this.form })
      // const { data: { page, pagesize, items, counts } } = await list(this.page)
      this.list = items
      this.page.page = page
      this.page.pagesize = pagesize
      this.page.total = counts
      // pages 总页数
      console.log(items)
    },
    // // 每页条数改变
    // SizeChange (val) {
    //   this.page.pagesize = val
    //   this.getArticlesList()
    // },
    // 当前页改变
    CurrentChange (val) {
      this.page.page = val
      this.getArticlesList()
    },
    // 查询
    async onSubmit () {
      this.page.page = 1

      this.getArticlesList()
    }

  },
  setup () {
    const showDialog = ref(false)
    const viewDialog = ref(false)

    const detailForm = ref({
      title: '',
      articleBody: '',
      videoURL: '',
      reads: 0
    }) // 详情数据

    const title = ref('')
    // 新增弹框按钮
    function addSkillBtn () {
      showDialog.value = true
      title.value = '新增技巧'
    }

    const dialogRef = ref()
    // 修改
    async function edit (row) {
      showDialog.value = true
      const { data } = await detail(row)
      console.log('修改', data)
      dialogRef.value.formData = data
      title.value = '修改文章'
    }
    // 预览
    async function viewDialogBtn (row) {
      viewDialog.value = true
      const { data } = await detail(row)
      detailForm.value = data
    }
    return { filtrationTime, showDialog, viewDialog, addSkillBtn, viewDialogBtn, detailForm, formState, State, EditPen, edit, dialogRef, title }
    // disableBtn
  }
}
</script>
<style lang="scss" scoped>
.articles{
  margin: 10px;
}
// 分页
.paging{
 margin-top: 20px;
}
:deep .el-link__inner {
  margin-right: 15px;
}
.table {
  margin-top: 15px;
}
// 预览弹框
.viewDialog{

.viewTime {
  margin-top: 10px;
  span {
    margin-right: 8px;
  }
}
// 文章内容
.content{
margin-top: 8px;
padding: 20px;
}
}
</style>
